@charset "utf-8";
@import './base.scss'; 
$maincolor: #005B99;

* {
    box-sizing: border-box;
}
html, body {
  height: 100%;
}

/* admin header */
.admin-header {
  $h: 50px;
  position: fixed; 
  top: 0;
  width: 100%;
  height: $h;
  line-height: $h;
  color: #fff;
  background-color: $maincolor;
  z-index: 11;  
  overflow: hidden;

  .header-bar {
    width: 100%;
    height: $h;
    overflow: hidden;
  }

  .admin-logo {
    font-size: 20px;
    float: left;
    height: $h;
    padding: 0 15px 0 30px;
    background-color: #4e4e4e;
    background: rgba(255, 255, 255, 0.1);
    width: 200px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .admin-name {
    width: 500px;
    float: left;
    padding-left: 20px;
  }

  .admin-icons {
    float: right;
    height: 60px;

    a {
      position: relative;
      display: inline-block;
      width: 24px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      background: #fff;
      border-radius: 50%;
      margin-left: 24px; 

      a:hover i {
        color: #FFAD59; 
      }

      .num {
        position: absolute;
        top: -4px;
        right: -4px;
        width: 14px;
        height: 14px;
        line-height: 14px;
        border-radius: 100%;
        background-color: #e6322c;
        font-size: 12px;
        transform: scale(0.8); 
      }

      i {
        font-size: 12px;
        color: #2494EC; 
      }
    }
  }
}

.admin-header .quit_login {
  padding: 0 35px 0 46px;
  height: 60px;
  float: right;
  text-align: center;
  font-size: 14px;
  color: #fff;
  cursor: pointer; }

.admin-header .quit_login .box {
  overflow: hidden;
  display: inline-block; }

.admin-header .quit_login span {
  float: left;
  margin: 0 8px; }

.admin-header .quit_login i {
  font-size: 14px;
  float: left; }

.admin-header .quit_login .down_sanjiao {
  float: left;
  z-index: 101;
  margin-top: 23px;
  border-width: 6px;
  border-color: #fff transparent transparent transparent;
  /*transparent 透明*/
  border-style: solid dashed dashed dashed;
  width: 0;
  height: 0;
  overflow: hidden; }

.admin-header .quit_login.active {
  color: #fff;
  background-color: #262a2d; }

.admin-header .quit_login.active .down_sanjiao {
  border-color: #fff transparent transparent transparent; }

.admin-header .admin_quit {
  display: none; }

.admin-header .quit_login:hover + .admin_quit {
  display: block; }

.admin-header .admin_quit:hover {
  display: block; }

.admin-header .admin_quit:before {
  content: "";
  position: fixed;
  top: 47px;
  right: 60px;
  z-index: 102;
  border-width: 8px;
  border-color: transparent transparent #fff transparent;
  border-style: dashed dashed solid dashed;
  width: 0;
  height: 0;
  overflow: hidden; }

.admin-header .admin_quit:after {
  content: '';
  width: 180px;
  height: 16px;
  background-color: #EFF3F5;
  opacity: 0;
  filter: alpha(opacity=0);
  position: absolute;
  top: 50px;
  right: 30px;
  z-index: -1; }

.admin-header .admin_quit .info {
  background-color: #fff;
  width: 180px;
  position: fixed;
  top: 62px;
  right: 30px;
  z-index: 101;
  padding-bottom: 10px;
  font-size: 14px;
  border: 1px solid #ebebeb;
  box-shadow: 0 0 8px 4px #ebebeb;
  border-radius: 5px; }

.admin-header .admin_quit .info a {
  color: #333; }

.admin-header .admin_quit .info ul {
  box-sizing: content-box;
  font-size: 14px;
  overflow: hidden;
  padding: 10px 20px;
  line-height: 20px; }

.admin-header .admin_quit .info ul li {
  float: left; }

.admin-header .admin_quit .user_info span {
  color: #696a6a; }

.admin-header .admin_quit .user_info p {
  font-weight: bold;
  color: #999; }

.admin-header .admin_quit .change_pw {
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5; }

.admin-header .admin_quit .pub_style:hover ul, .admin-header .admin_quit .pub_style:hover i {
  background-color: #F4F6F9;
  color: $maincolor; }

.admin-header .admin_quit .pub_style ul {
  color: #26292d;
  height: 20px; }

.admin-header .admin_quit .pub_style i {
  font-size: 16px;
  color: #666;
  margin-right: 5px; }

.admin-header .admin_quit .change_pw i {
  font-size: 18px; }

.admin-aside {
  position: fixed; 
  z-index: 9;
  top: 0;
  left: 0;
  height: 100%;
  padding-top: 50px;  
  padding-bottom: 40px;  
  background-color: #fff;
  overflow-y: auto;
  box-shadow: 2px 0 4px 0 rgba(0, 0, 0, 0.05);
  border-right: 1px solid #e5e5e5; 

  &::-webkit-scrollbar {
    width: 6px;
    height: 80px;  
    background: #4F4F4F;
    border-radius: 3px;
  }

  &::-webkit-scrollbar-track { 
    background: #F0F4F3;
      border-radius: 10px;   
  }

  &::-webkit-scrollbar-thumb {
    width: 6px;
    height: 80px;
    border-radius: 5px;
    background: #C1C1C1;
  }
} 

.admin-aside .company_logo {
  position: fixed;
  z-index: 10;
  padding-bottom: 20px;
  bottom: 0;
  width: 200px;
  background: #fff;
  text-align: center; }

.admin-aside .company_logo a {
  color: #ccc; }

.admin-aside .first_sidebar {
  box-sizing: border-box;
  width: 200px; }

.admin-aside .toggle-in {
  width: 50px; }

.admin-aside .toggle-in li span, .admin-aside .toggle-in li .slide-icon, .admin-aside .toggle-in .second-menu span {
  display: none; }

.admin-aside .first_sidebar li {
  height: 44px; }

.admin-aside .first_sidebar li .first-menu {
  line-height: 44px;
  height: 44px;
  color: #333;
  font-size: 14px;
  padding: 0 16px;
  display: block;
  position: relative; }

.admin-aside .first_sidebar li .slide-icon {
  position: absolute;
  top: 0; 
  font-size: 10px;
  color: #999; }

 
.admin-aside .first_sidebar .first-menu.slidedown .slide-icon.slidedown {
  display: block; }

.admin-aside .first_sidebar .first-menu.slidedown .slide-icon {
  display: none; }

.admin-aside .first_sidebar li.toggle-menu {
  background-color: #f4f6f9;
  height: 36px;
  line-height: 36px;
  text-align: center; }

.admin-aside .first_sidebar li.toggle-menu i {
  color: #999;
  font-size: 20px;
  cursor: default;
  padding: 0 10px; }

.admin-aside .first_sidebar li.toggle-menu i.shrink {
  display: none; }

.admin-aside .first_sidebar.toggle-in li.toggle-menu i {
  display: none; }
  .admin-aside .first_sidebar.toggle-in li.toggle-menu i.shrink {
    display: inline; }

.admin-aside .first_sidebar .first-menu i.iconfont {
  font-size: 16px;
  margin-right: 12px;
  width: 16px;
  height: 16px;
  display: inline-block;
  line-height: 1;
  color: #666; }

.admin-aside .first_sidebar li .slide-icon.slidedown {
  display: none; }

.admin-aside .first_sidebar .first-menu i.slide-icon { 
  transform: scale(.5);
  width: 8px;
  height: 100%;
  line-height: 44px;
  right: 15px;
  margin-right: 0;
  text-align: right;
}

.admin-aside .second-menu {
  display: none; }

.admin-aside .second-menu a {
  display: block;
  padding-left: 35px;
  height: 36px;
  line-height: 36px;
  color: #666; }

.admin-aside .second-menu a i {
  font-size: 10px;
  margin-right: 6px;
  color: #666; }

.admin-aside .second-menu.toggle-in span {
  display: none; }

.admin-aside .second-menu a:hover,
.admin-aside .second-menu a:hover i,
.admin-aside .second-menu a.active,
.admin-aside .second-menu a.active i,
.admin-aside .first_sidebar .first-menu:hover,
.admin-aside .first_sidebar .first-menu:hover i,
.admin-aside .first_sidebar .first-menu.active,
.admin-aside .first_sidebar .first-menu.active i {
  color: $maincolor;
  background: #F4F6F9;
  cursor: default; }

.head_img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 14px;
  margin-left: 49px;
  margin-top: 15px; }

.admin-section {
  height: 100%;
  margin-left: 200px;
  padding-top: 50px;
  box-sizing: border-box;
  overflow: hidden;
  background-color: #EFF3F5; }
